<template>
  <view class="page">
    <view class="page__title">注册</view>
    <view class="page__desc">欢迎使用{{ appConfig.name }}!</view>
    <view class="page__form">
      <view class="input-box">
        <u-input
          v-model="realName"
          font-size="32rpx"
          prefix-icon="https://ui-resourse.oss-cn-shenzhen.aliyuncs.com/picture/2022/03/28/IIwyhuVGRZJZBjim.png"
          :prefix-icon-style="{
            marginRight: '32rpx'
          }"
          placeholder="请输入姓名"
          :placeholder-style="{
            fontSize: '32rpx',
            color: '#9E9E9E'
          }"
          border="none"
        />
      </view>
      <view class="input-box">
        <u-input
          v-model="phoneNumber"
          font-size="32rpx"
          prefix-icon="https://ui-resourse.oss-cn-shenzhen.aliyuncs.com/picture/2022/04/02/yugCDreSPKbjBbCI.png"
          :prefix-icon-style="{
            marginRight: '32rpx'
          }"
          placeholder="请输入手机号"
          :placeholder-style="{
            fontSize: '32rpx',
            color: '#9E9E9E'
          }"
          border="none"
        />
        <!-- <template #suffix>
            <view>
              <u-button
                text="获取手机号"
                color="#386ee8"
                size="small"
                open-type="getPhoneNumber"
                :loading="getPhoneNumberFn.payload.loading"
                @getphonenumber="getPhoneNumberFn"
              />
            </view>
          </template> -->
      </view>

      <view class="input-box">
        <u-input
          v-model="password"
          font-size="32rpx"
          :password="!pwdShow"
          prefix-icon="https://ui-resourse.oss-cn-shenzhen.aliyuncs.com/picture/2022/03/28/CdsyLptGkuMDaWNo.png"
          :prefix-icon-style="{
            width: '28rpx',
            height: '26rpx',
            marginRight: '32rpx'
          }"
          placeholder="请输入登录密码"
          :placeholder-style="{
            fontSize: '32rpx',
            color: '#9E9E9E'
          }"
          border="none"
        >
          <template #suffix>
            <view v-show="password" @tap="pwdShow = !pwdShow">
              <u-icon v-if="pwdShow" name="eye-fill" size="36rpx" />
              <u-icon v-else name="eye-off" size="40rpx" />
            </view>
          </template>
        </u-input>
      </view>
      <view class="input-box">
        <view class="flex">
          <image src="/static/gender.png" class="mr-32rpx w-32rpx h-32rpx" />
          <u-radio-group v-model="sex" placement="row">
            <u-radio
              v-for="(item, index) in [
                {
                  name: '男'
                },
                {
                  name: '女'
                }
              ]"
              :key="index"
              :custom-style="{ marginRight: '20rpx', color: '#9E9E9E' }"
              :label="item.name"
              :name="item.name"
              @change="sexChange"
            ></u-radio>
          </u-radio-group>
        </view>
      </view>
      <view class="input-box">
        <picker :range="deptList" @change="changeDept">
          <u-input
            v-model="deptName"
            font-size="32rpx"
            prefix-icon="/static/dept.png"
            suffix-icon="arrow-down"
            suffix-icon-style="color: #9E9E9E"
            :prefix-icon-style="{
              marginRight: '32rpx'
            }"
            placeholder="请选择部门"
            :placeholder-style="{
              fontSize: '32rpx',
              color: '#9E9E9E'
            }"
            border="none"
          />
        </picker>
      </view>
    </view>
    <view class="mt-70rpx">
      <u-button
        text="注册"
        color="#386ee8"
        :disabled="btn_disabled"
        :throttle-time="600"
        @click="handleRegister"
      />
    </view>
    <view class="page__register">
      <text>已有账号？</text>
      <text @click="GoToLogin">去登录</text>
    </view>

    <view class="page__policy">
      <text>请阅读</text>
      <text @click="handleOpen(1)">《用户协议》</text>
      &
      <text @click="handleOpen(2)">《隐私政策》</text>
    </view>
  </view>
</template>

<script lang="ts">
import dayjs from 'dayjs'
import { Component, Vue } from 'vue-property-decorator'

import TenantSelect from '@/components/tenant-select/tenant-select.vue'
import { useGetPhoneNumber } from '@/hook/getPhoneNumber'
import { useGlobalSetting } from '@/settings/system'
import { appStore } from '@/store/modules'
import { showModal } from '@/utils/helper/uniHelper'

import { registerApi } from './service'
@Component({ name: 'Register', components: { TenantSelect } })
export default class Register extends Vue {
  get appConfig() {
    return useGlobalSetting()
  }
  public pwdShow = false

  public showTenantSelect = false

  get defaultTenantId() {
    return appStore.initDefaultTenant
  }

  readonly deptList = ['人口管理部', '婚姻管理部', '税务部门']

  public realName = ''
  public phoneNumber = ''
  public password = ''
  public sex = ''
  public deptName = ''
  sexChange(n: string) {
    this.sex = n
  }
  changeDept({ detail }: any) {
    this.deptName = this.deptList[+detail.value]
  }

  get btn_disabled() {
    const { realName, phoneNumber, password, sex, deptName } = this
    return !realName || !phoneNumber || !password || !sex || !deptName
  }
  get getPhoneNumberFn() {
    return useGetPhoneNumber((result, err) => {
      if (err) {
        return showModal({
          content: '获取手机号码失败，请手动填写！'
        })
      }
      this.phoneNumber = result.phoneNumber
    })
  }

  onLoad() {
    uni.hideHomeButton()
  }

  async handleRegister() {
    try {
      const { realName, phoneNumber, password, sex, deptName } = this
      await registerApi({
        realName,
        phoneNumber,
        password,
        sex,
        deptName,
        state: 1,
        createTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
      })
      await showModal({
        title: '注册提示',
        content: '账户注册成功！'
      })
      this.GoToLogin()
    } catch (e) {
      console.log(e)
    }
  }

  GoToLogin() {
    uni.redirectTo({
      url: './login'
    })
  }

  handleOpen(type: 1 | 2 = 1) {
    // const { privacyUrl } = useGlobalSetting()
    // if (!privacyUrl.length) return
    // uni.navigateTo({
    //   url: buildUrl('/pages/webview/index', {
    //     url: privacyUrl[type - 1] ?? privacyUrl[0]
    //   })
    // })
  }
}
</script>

<style lang="scss" scoped>
.page {
  @apply min-h-screen bg-white p-50rpx text-[#9e9e9e];

  &__title {
    @apply mt-26rpx text-48rpx text-[#333];
  }

  &__desc {
    @apply mt-36rpx text-32rpx;
  }

  &__form {
    @include gap-y(70rpx);
    @apply mt-179rpx flex flex-col;
  }

  &__register {
    @apply mt-50rpx text-center text-26rpx;

    text:last-child {
      @apply text-primary;
    }
  }

  &__policy {
    @apply fixed left-0 right-0 text-center text-24rpx;
    bottom: calc(44rpx + $bs-height);

    text:not(:first-child) {
      @apply text-primary;
    }
  }
}

.input-box {
  @apply pb-16rpx;
  border-bottom: 2rpx solid #f6f6f6;
}
</style>
